import React, { useEffect, useRef, useState } from 'react';
import Vditor from 'vditor';
import "vditor/dist/index.css";
import styles from './vditor.less';;
import request from '@/utils/request';
import { upload } from '@/services/vditor';
import iconImg from '@/assets/knowledgeFile/2.svg';

var vditor = null;

function MarkdownEditor(props) {
    const editorRef = useRef(null);
    const [vditorNew, setVditorNew] = useState(0);
    const [vditorCurrent, setVditorCurrent] = useState({});

    useEffect(() => {
        vditor = new Vditor(editorRef.current, {
            value: props.value,
            cache: false,
            input: (value) => props.onChange(value),
            height: props.height,
            cdn: staticPath + '/vditor',
            counter: { enable: true },
            toolbar: [
                'emoji', 'headings', 'bold', 'italic', 'strike', 'link', '|',
                'list', 'ordered-list', 'check', 'outdent', 'indent', '|',
                'quote', 'line', 'code', 'inline-code', 'insert-before', 'insert-after', '|',
                'upload', /** 'record', */ 'table', '|', 'undo', 'redo', '|',
                /** 'fullscreen', 'edit-mode', */
                {
                    name: "edit-mode",
                    tip: "切换编辑模式",
                    icon: `<img style="height: 16px" src="${iconImg}" />`,
                },
                // 'both', 'preview', 'outline', 'code-theme', 'content-theme', 'export', 'devtools', 'info', 'help', 'br'
            ],
            placeholder: "请输入正文",
            preview: {
                show: false,
                actions: [],
            },
            after: () => {
                setVditorNew(1);
                // setTitleAsync();
                // vditorCurrent[props.id].disabled();
            },
            upload: {
                // accept: 'image/jpeg,image/png,image/gif,image/jpg,image/bmp', // 图片格式
                // max: 2 * 1024 * 1024,  // 控制大小
                multiple: true, // 是否允许批量上传
                fieldName: 'file', // 上传字段名称
                url: '/cloud/file/upload',
                success: function (textarea, msg) {//textarea  
                    //将返回的信息传为json对象 
                    let msgData = JSON.parse(msg)
                    if (msgData?.state === "SUCCESS") {//请求成功  
                        vditorCurrent[props.id].tip('上传成功', 1500);
                        let content;
                        //获取文件后缀，判断类型  
                        let temp = msgData.original.substring(msgData.original.lastIndexOf('.') + 1)
                        if (temp == "png" || temp == "jpg") {
                            content = "![" + msgData.original + "](" + msgData.url + ")"
                        } else {
                            content = "[" + msgData.original + "](" + msgData.url + ")"
                        };
                        //插入上传文件后的markdown代码  
                        vditorCurrent[props.id].insertValue(content)
                    }
                }
            },
        });
        vditorCurrent[props.id] = vditor;
        setVditorCurrent(vditorCurrent);
        if (props.setVditorRef) {
            props.setVditorRef(vditor)
        };
    }, [])

    useEffect(() => {
        if (props.value == '') { } else {
            if (vditorNew == 1) {
                setEditorContentAsync()
            }
        }
    }, [props.value, vditorNew])

    const setEditorContentAsync = () => {
        if (vditorCurrent[props.id] && vditorCurrent[props.id].setValue) {
            vditorCurrent[props.id].setValue(props.value);
            // vditorCurrent[props.id].disabled();
        }
    };

    return (
        <div className={styles["markdown-editor"]} id={props.id} ref={editorRef}></div>
    )
}

export default React.forwardRef(MarkdownEditor);
